<script setup lang='ts' name="protocol-management-list-expand">
import { useJcDeliveryNoteReceive } from '@fl/api/purchase'
import { toRefs } from 'vue'

import { DELIVERYNOTESTATE_DICT } from '../constant'
import ApprovalAcceptance from './approval-acceptance.vue'

const props = defineProps<{ data: any }>()

const { mutate } = useJcDeliveryNoteReceive()

const { data } = toRefs(props)

const visible = ref<boolean>(false)
const id = ref('')

function takeOver(item: any) {
    console.log(item)
    mutate(item.id, {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

function acceptance(item: any) {
    id.value = item.id
    visible.value = true
}
</script>

<template>
    <div v-for="(item, index) in data"
         :key="index"
         class="protocol-list"
    >
        <div class="list-content">
            <div class="check-col">
                发货单
            </div>

            <div class="list-row">
                <div class="list-col">
                    <p class="col-title cursor-pointer"
                       @click="acceptance(item)"
                    >
                        {{ item?.deliveryNoteName }}
                    </p>

                    <p>
                        订单编号：
                        <span>
                            {{ item?.orderNo }}
                        </span>
                    </p>
                </div>

                <div class="list-col">
                    <p style="padding-left: 14px;">
                        {{ DELIVERYNOTESTATE_DICT[item?.deliveryNoteState]?.label }}
                    </p>
                </div>

                <div class="list-col" />

                <div class="list-col" />

                <div class="list-col">
                    <ElButton v-if="item?.deliveryNoteState === 2"
                              size="small"
                              type="primary"
                              @click="takeOver(item)"
                    >
                        接收
                    </ElButton>

                    <ElButton v-if="item?.deliveryNoteState === 3"
                              size="small"
                              type="primary"
                              @click="acceptance(item)"
                    >
                        查看并验收
                    </ElButton>
                </div>
            </div>
        </div>
    </div>

    <ApprovalAcceptance :key="id"
                        v-model:id="id"
                        v-model:visible="visible"
    />
</template>

<style lang="less" scoped>
@bg-color: #f5f6fa;
@label-color: gray;

.protocol-list {
    width: 100%;
    border-radius: 4px;
    border-top: 1px solid @bg-color;
    padding-left: 15px;

    .list-content {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 10px 0;
        font-size: 14px;

        .check-col {
            width: 60px;
            text-align: center;
            background: @bg-color;
            padding: 0 2px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 15px;
        }

        .list-row {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .list-col {
                min-width: 200px;
                color: @label-color;

                .col-title {
                    font-size: 14px;
                    font-weight: 600;
                    color: #000;

                    .col-tips {
                        .el-icon {
                            color: @label-color;
                            border: 1px solid @label-color;
                            border-radius: 8px;
                            padding: 2px;
                            transform: translateY(2px);
                            margin-right: 10px;
                        }

                        .col-txt {
                            font-size: 12px;
                            color: #4771f6;
                            background: @bg-color;
                            padding: 3px 5px;
                            border-radius: 4px;
                        }
                    }
                }
            }
        }
    }
}
</style>
